<!-- svg图标组件 -->
<template>
	<div
		v-if="isExternal"
		:style="styleExternalIcon"
		class="svg-external-icon svg-icon"
		v-on="$listeners"
	/>
	<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
		<use :xlink:href="iconName" rel="external nofollow"  />
	</svg>
</template>

<script>
	import { isExternal } from '@/utils/verify'
	export default {
		name:'SvgIcon',
		//参数
		props:{
			//图标名
			iconClass: {
			    type: String,
			    required: true,
			},
			//样式类名
			className: {
				type: String,
				default: "",
			},
		},
		//计算
		computed: {
			isExternal(){
				//校验是否为外部链接
				return isExternal(this.iconClass)
			},
			iconName() {
				return `#icon-${this.iconClass}`
			},
			svgClass() {
			    if (this.className) {
					return "svg-icon " + this.className
			    } else {
			        return "svg-icon"
			    }
			},
			styleExternalIcon() {
			    return {
					mask: `url(${this.iconClass}) no-repeat 50% 50%`,
					"-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
			    }
			}
		},
	}
</script>

<style scoped>
	 .svg-icon {
	    width: 1em;
	    height: 1em;
	    vertical-align: -0.15em;
	    fill: currentColor;
	    overflow: hidden;
	}
	 
	.svg-external-icon {
		background-color: currentColor;
		mask-size: cover !important;
		display: inline-block;
	}
</style>